<!-- 底部标签栏 -->
<template>
<div class='tabbar'>
    <ul>
        <router-link tag="li" to='/home'>
            <div class="tab-img">
                <i class="iconfont icon-shouye2" v-if="$route.path.includes('/home')"></i>
                <i class="iconfont icon-1" v-else></i>
            </div>
            <span>首页</span>
        </router-link>
            <router-link tag="li" to='/category'>
            <div class="tab-img">
               <i class="iconfont  icon-leimupinleifenleileibie2 "  v-if="$route.path.includes('/category')"></i>
                <i class="iconfont icon-leimupinleifenleileibie" v-else></i>
            </div>
            <span>分类</span>
        </router-link>
            <router-link tag="li" to='/find'>
            <div class="tab-img">
                 <i class="iconfont icon-sousuo2 " v-if="$route.path.includes('/find')"></i>
                <i class="iconfont icon-sousuo1" v-else></i>
            </div>
            <span>发现</span>
        </router-link>
            <router-link tag="li" to='/cart'>
            <div class="tab-img">
                 <i class="iconfont icon-gouwucheman" v-if="$route.path.includes('/cart')"></i>
                <i class="iconfont icon-gouwuche " v-else></i>
            </div>
            <span>购物车</span>
        </router-link>
            <router-link tag="li" to='/mine'>
            <div class="tab-img">
                 <i class="iconfont icon-wodedangxuan" v-if="$route.path.includes('/mine')"></i>
                <i class="iconfont icon-wode" v-else></i>
            </div>
            <span>我的</span>
        </router-link>
    </ul>
</div>
</template>

<script>

export default {
components: {},
data() {
//这里存放数据
return {
    // activePath:"/home",
};
},
mounted(){

}

}
</script>
<style lang='less' >
.router-link-active{
    color: rgb(196, 60, 60);
}
.tabbar{
    width: 100%;
    height: 4.9rem;
    border-top: 1px solid #ccc;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    ul{
        height: 4.9rem;
        display: flex;
        justify-content: center;
        align-items: center;
        li{
            flex: 1;
            text-align: center;
            i{
                font-size: 2.2rem;
            }
        }
    }
}
</style>